<template>
  <div v-loading="loading">
    <div style="width: 100%; height: 350px; padding: 10px 10px 50px 10px; overflow: auto;">
      <el-tag
        v-for="tag in dynamicTags"
        :key="tag"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
      >
        {{ tag }}
      </el-tag>
      <el-input
        v-if="inputVisible"
        ref="saveTagInput"
        v-model="inputValue"
        class="input-new-tag"
        size="small"
        maxlength="50"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      />
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ {{ $t('添加') }}</el-button>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <el-buton class="el-button el-button--default" @click="$parent.$parent.tabsFormOpen = false">{{ $t('取消') }}</el-buton>
      <el-button type="primary" @click="submitForm">{{ $t('保存') }}</el-button>
    </div>
  </div>
</template>

<script>
import { addTagToFile } from '@/api/file/fileBase.js'
export default {
  name: 'FileTag',
  data() {
    return {
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      parentRowData: {},
      parentRowIndex: undefined,
      loading: false
    }
  },
  methods: {
    init(data, index) {
      this.parentRowData = data
      this.parentRowIndex = index
      console.log(data, data.fileTag)
      if (data !== undefined && data !== null && data !== '') {
        if (data.fileTag !== undefined && data.fileTag !== null && data.fileTag !== '') {
          this.dynamicTags = data.fileTag.split(',')
        } else {
          this.dynamicTags = []
        }
      }
    },
    submitForm() {
      const result = this.dynamicTags.join(',')
      // 根据文件id修改fileTag
      this.loading = true
      addTagToFile({ id: this.parentRowData.id, fileTag: result }).then(response => {
        if (response.code === 200) {
          this.msgSuccess(response.msg)
          this.parentRowData.fileTag = result
        } else {
          this.msgError(response.msg)
        }
        this.loading = false
        this.$emit('updateFileTag', this.parentRowData, this.parentRowIndex)
        this.$parent.$parent.tabsFormOpen = false
      })
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      var inputValue = this.inputValue
      if (inputValue) {
        if (this.dynamicTags.find(item => item === inputValue)) {
          this.msgError(this.$t('已存在,不可重复添加!'))
        } else {
          this.dynamicTags.push(inputValue)
        }
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style scoped>
/deep/ .el-tag + .el-tag {
  margin-left: 10px;
  margin-top: 15px;
}
/deep/ .button-new-tag {
  margin-left: 10px;
  margin-top: 15px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
/deep/ . {
  width: 90px;
  margin-left: 10px;
  margin-top: 15px;
  vertical-align: bottom;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  margin-top: 15px;
  vertical-align: bottom;
}
</style>
